<template>
  <div class="order-detail">
    <div class="order_info">
      <p class="title">订单信息</p>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="订单编号" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="订单状态" label-class-name="my-label" span="2" class-name="status">
          <template #default>
            <div class="orderStatus">
              <div v-if="orderDetail.data.orderStatus === 'PAYREJECT'">
                <el-tooltip popper-class="tooltip" effect="light" placement="bottom">
                  <span class="payReject">支付审核驳回</span>
                  <template #content>
                    <h4>驳回备注</h4>
                    <div class="reason">{{ orderDetail.data.payRefuseRemark }}</div>
                  </template>
                </el-tooltip>
              </div>
              <span v-else>{{ $formater.formaterOrderStatus(orderDetail.data.orderStatus) }}</span>

              <Link class="btn" v-if="orderDetail.data.orderStatus === 'UNPAID' && orderDetail.data.afterSaleFlag === 'NOT_APPLY'" label="月付" @click="onMonthlyClick" :underline="false" />
            </div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间" label-class-name="my-label" class-name="my-content">{{ $formater.formatTime(orderDetail.data.createTime) }}</el-descriptions-item>
        <el-descriptions-item v-if="orderDetail.data.orderStatus === 'UNDELIVER' || orderDetail.data.orderStatus === 'DELIVERED'" label="支付时间" label-class-name="my-label" class-name="my-content">{{ $formater.formatTime(orderDetail.data.paySuccTime) }}</el-descriptions-item>
        <el-descriptions-item v-else-if="orderDetail.data.orderStatus === 'COMPLETED'" label="确认收货时间" label-class-name="my-label" class-name="my-content">{{ $formater.formatTime(orderDetail.data.confirmReceiptTime) }}</el-descriptions-item>

        <div v-if="orderDetail.data.orderStatus === 'DELIVERED'">
          <el-descriptions-item label="发货时间" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.deliveryTime }}</el-descriptions-item>
          <el-descriptions-item label="物流单号" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.trackingNumber }}</el-descriptions-item>
        </div>

        <div v-if="orderDetail.data.orderStatus === 'CANCELED'">
          <el-descriptions-item label="取消时间" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.cancelTime }}</el-descriptions-item>
          <el-descriptions-item label="取消原因" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.cancelReason }}</el-descriptions-item>
        </div>

        <el-descriptions-item v-if="orderDetail.data.orderStatus !== 'UNPAID'" label="支付凭证" label-class-name="my-label" class-name="my-content">
          <span v-if="orderDetail.data.settleType === 'MONTHLY'">月结</span>
          <div v-else class="proof">
            <img class="proof_img" :src="orderDetail.data.payProof" />
            <Link label="查看" class="btn" @click="onShowImgClick(orderDetail.data.payProof)" :underline="false" />
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="采购商" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.customerName }}</el-descriptions-item>
        <el-descriptions-item label="供应商" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.supplierName }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="delivery_info">
      <p class="title">配送信息</p>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="收货人" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.shippingPerson }}</el-descriptions-item>
        <el-descriptions-item label="收获地址" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.shippingDetail }}</el-descriptions-item>
        <el-descriptions-item label="收货电话" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.shippingMobile }}</el-descriptions-item>
        <el-descriptions-item label="备注信息" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.buyerRemark }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="goods">
      <div class="top">
        <p class="title">商品信息</p>
        <Button label="导出订单" class="export_button" type="primary" @click="onToExportClick" />
      </div>
      <Table type="goods" :list="orderDetail.orderGoodsList" :orderPrice="orderDetail.data.orderPrice" :orderReceivePrice="orderDetail.data.orderReceivePrice" />
    </div>

    <div class="goods" v-if="orderDetail.backOrderGoodsList?.length > 0">
      <div class="top">
        <p class="title">售后信息</p>
        <Button label="售后详情" class="export_button" type="primary" @click="onBackDetailClick" />
      </div>
      <Table :list="orderDetail.backOrderGoodsList" :afterSaleFlag="orderDetail.afterSaleFlag" type="afterSale"
             :afterSalePrice="orderDetail.data.orderReceivePrice" />
    </div>
  </div>

  <div class="audit_button" v-if="ori === 'payAudit'">
    <Button label="驳回" @click="onRejectClick" />
    <Button type="primary" label="通过" @click="onPassClick" />
  </div>

  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />

  <Reject v-model:visible="rejectVisible" @change="onRejectChange" />
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import Table from '@/components/table/goods.vue'
import Button from '@/components/button/button.vue'
import Link from '@/components/button/link.vue'
import Reject from '@/components/reject/index.vue'

const router = useRouter()
const route = useRoute()
const ori = route.meta.ori || ''
const orderId = route.params.id
const rejectVisible = ref(false)

const orderDetail = reactive({
  orderGoodsList: [],
  backOrderGoodsList: [],
  data: {},
  customerId: ''
})
const loading = ref(false)

const srcList = ref([])
const previewViewer = ref()
const showImageViewer = ref(false)

const changeOrderPay = async () => {
  let { err } = await api.post(`/medinstrument/boss/order/changeOrderPay?orderId=${orderId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('修改成功')
    loadData()
  }
}

const audit = async (operateType, orderId, remark) => {
  let { err } = await api.post(`/medinstrument/boss/order/auditOrderPay?operateType=${operateType}&orderIds=${orderId}&remark=${remark}`)
  if (err) {
    ElMessage.error(err)
  } else {
    router.push('/order/pay')
    operateType === 'PASS' ? ElMessage.success('审核已通过') : ElMessage.success('审核已驳回')
  }
}

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get(`/medinstrument/boss/order/getOrderdetails?orderId=${orderId}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    orderDetail.orderGoodsList = data.data.orderGoodsList
    orderDetail.backOrderGoodsList = data.data.backOrderGoodsList
    orderDetail.afterSaleFlag = data.data.afterSaleFlag
    orderDetail.data = data.data
  }
}

const onToExportClick = () => {
  api.download(`/medinstrument/boss/exportExcel/exportOrderDetails?orderId=${orderId}`)
}

const onRejectClick = () => {
  rejectVisible.value = true
}

const onPassClick = () => {
  ElMessageBox.confirm('是否确认通过审核', '系统', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      audit('PASS', orderId, '')
    })
    .catch(() => {})
}

const onRejectedClick = () => {
  rejectVisible.value = true
}

const onRejectChange = (val) => {
  audit('REJECT', orderId, val)
}

const onMonthlyClick = () => {
  ElMessageBox.confirm('是否将订单修改为月付订单?', '系统', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      changeOrderPay()
    })
    .catch(() => {})
}

const onBackDetailClick = () => {
  let { href } = router.resolve({
    path: `/order/afterSale/detail/${orderId}`
  })
  window.open(href, '_blank')
}

const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}

const closeImgView = () => {
  showImageViewer.value = false
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.order-detail {
  margin: 0 15px 0 10px;

  .order_info,
  .delivery_info,
  .goods {
    padding: 20px 10px 20px 20px;
    margin-top: 10px;
    background-color: #fff;

    .title {
      font-size: 16px;
      font-weight: 500;
      line-height: 16px;
    }
  }

  .top {
    display: flex;
    align-items: center;

    .export_button {
      margin-left: 20px;
    }
  }

  .order_info {
    .btn {
      margin-left: 20px;
    }

    .orderStatus {
      display: flex;
      align-items: center;

      .payReject {
        position: relative;
      }

      .payReject::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        width: 100%;
        height: 1px;
        background-color: #e6a23c;
      }
    }

    .proof {
      display: flex;
      align-items: center;
    }
  }
}
</style>
<style>
.tooltip {
  line-height: 18px;
  box-shadow: 1px 1px 10px 3px #d3d3d6;
  font-size: 14px !important;
  color: var(--color-primary-text) !important;
}
</style>
